<template>
  <div class="page-wrap">
    <div class="page-wrap-content pt-24"> 
      <div class="page-wrap-messageItem" v-for="(item , index) in messageList" :key="index">
        <div class="page-wrap-messageItemtilte">{{ item.title }}</div>
        <div class="page-wrap-messageItemTime">{{ item.time }}</div>
        <div class="page-wrap-messageItemcontent">{{ item.content }}</div>
      </div>
      <div class="page-wrap-footer">
        <pk-page :total="total" onSize="onSize"></pk-page>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue'
  import pkPage from '@/components/pkui/pkpage/pkpage.vue'
  import { getPageList } from '@/api/api'
  import { getTime } from '@/utils/utils'
  import { useSideStore } from '@/store/state'
  const counterStore = useSideStore()
  const messageList = ref([])

  const page = ref(1)
  const total = ref(0)


  const getInit = () => {
    getPageList({
      page: page.value
    }).then(res => {
      counterStore.SETMASVALUE(0)
      total.value = res.data.total
      messageList.value = res.data.list.map(item => {
        return {
          ...item,
          created_at: getTime(item.created_at, 'time')
        }
      })
    })
  }

  const onSize = (e) => {
    page.value = e
    getInit()
  }

  onMounted(() => {
    getInit()
  })
</script>

<style lang="scss" scoped>
  .page-wrap{
    overflow: auto;
    &-content{
      margin: 0 auto;
      min-height: 100%;
      width: 90%;
      margin-bottom: 100px;
      font-size: 12px;
    }
    &-messageItemtilte{
      font-size: 14px;
      font-weight: bold;
      margin-bottom: 4px;
      overflow: hidden;
    }
    &-messageItemTime{
      font-size: 12px;
      margin-bottom: 4px;
      overflow: hidden;
    }
    &-messageItem{
      border-radius: 12px;
      border: #ddd 1px solid;
      background: #fff;
      padding: 12px;
      margin-bottom: 12px;
    }
    &-messageItemcontent{
      color: #2a2a2a;
    }
    &-footer{
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 40px;
    }
  }
</style>